
<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
				<el-form-item prop="interfaceName">
					<el-input placeholder="请输入接口名称" clearable style="max-width: 180px" v-model="state.queryForm.interfaceName" />
				</el-form-item>
				<el-form-item prop="requestUrl">
					<el-input placeholder="请输入请求URL" clearable style="max-width: 180px" v-model="state.queryForm.requestUrl" />
				</el-form-item>
				<el-form-item prop="method">
					<el-input placeholder="请输入请求方式" clearable style="max-width: 180px" v-model="state.queryForm.method" />
				</el-form-item>
				<el-form-item>
					<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
				<div class="absolute right-8">
					<el-form-item>
						<el-button class="ml10" @click="openLayerDialog('add')" icon="CirclePlus" type="primary"> 创建接口服务 </el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-table
				ref="tableRef"
				v-loading="state.loading"
				:data="state.dataList"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
			>
				<el-table-column prop="interfaceName" label="接口名称" show-overflow-tooltip />
				<el-table-column prop="method" label="请求方式" show-overflow-tooltip />
				<el-table-column prop="requestUrl" label="请求URL" show-overflow-tooltip>
					<template #default="scope">
						<el-tag @click="copyText(scope.row)">{{ scope.row.requestUrl }} </el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="servicesStatus" label="服务状态">
					<template #default="scope">
						<el-tag :type="scope.row.servicesStatus == 1 ? 'success' : 'info'" @click="editStatus(scope.row)"
							>{{ scope.row.servicesStatus == 1 ? '上线' : '下线' }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="remarks" label="备注" show-overflow-tooltip />
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
				<el-table-column label="预览">
					<template #default="scope">
						<span @click="openLayerDialog('get', scope.row.interfaceId)" class="jColor">查看</span>
					</template>
				</el-table-column>
				<el-table-column label="管理">
					<template #default="scope">
						<i class="iconfont icon-shanchu jColor" @click="handleDelete(scope.row)"></i>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
		</div>
		<layerDialog @refresh="getDataList()" ref="layerDialogRef" />
		<detailDialog @refresh="getDataList()" ref="detailDialogRef" />
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, defineAsyncComponent } from 'vue';
import { pageList, delInterface, updateInterface } from '/@/api/communal/interface.ts';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useI18n } from 'vue-i18n';
import { useMessage, useMessageBox } from '/@/hooks/message';
// 引入组件
const layerDialog = defineAsyncComponent(() => import('./components/layerManagement/layerDialog.vue'));
const detailDialog = defineAsyncComponent(() => import('./components/interface-detail.vue'));

const { t } = useI18n();

// 定义变量内容
const tableRef = ref();
const queryRef = ref();
const layerDialogRef = ref();
const detailDialogRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: pageList,
	queryForm: {
		interfaceName: '',
		requestUrl: '',
		method: '',
	},
	isPage: true,
});

const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);

// 搜索事件
const query = () => {
	state.dataList = [];
	getDataList();
};

// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	state.queryForm = {};
	getDataList();

	window.console.log('清空');
};

// 打开图层弹窗
const openLayerDialog = (type?: string, row?: any) => {
	if (type == 'get') {
		detailDialogRef.value.openDialog(type, row);
	} else if (type == 'add') {
		layerDialogRef.value.openDialog();
	}
};

// 删除操作
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delInterface({ interfaceId: row.interfaceId });
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

// 修改状态
const editStatus = async (row: any) => {
	try {
		await updateInterface({ interfaceId: row.interfaceId });
		getDataList();
		useMessage().success(t('common.editSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

// 复制
const copyText = (row: any) => {
	navigator.clipboard
		.writeText(row.requestUrl)
		.then(() => {
			useMessage().success('复制成功');
		})
		.catch(() => {});
};
</script>

<style scoped lang="scss">
:deep(.el-popover.el-popper) {
	min-width: '80px';
}
</style>
